<template>
  <div style="padding-top:20px;">
    <div class="exam">
      <div class="exam-left-part">
        <div class="theory-exam">
          <div class="title-text">理论考试</div>
          <p>第一考台</p>
        </div>
        <div class="examinee-info">
          <div class="title-text">考生信息</div>
          <div>
            <div style="margin:25px auto">
              <img src="./../../images/potrait.png" alt>
            </div>
            <p>考生姓名：{{userName}}</p>
            <p>性别：男</p>
            <p>考试科目：{{subjectText}}</p>
            <p>考试车型：C1</p>
            <p>考试原因：初次申领</p>
          </div>
        </div>
        <div class="timing">
          <div class="title-text">剩余时间</div>
          <count-down
            style="font-size:28px;color:#e4693c"
            v-if="!hasSubmitExam"
            @start_callback="countDownStart"
            @end_callback="countDownEnd"
            :currentTime="currentTime"
            :startTime="currentTime"
            :endTime="endTime"
            :tipText="'距离开始文字1'"
            :tipTextEnd="'距离结束文字1'"
            :endText="'时间到'"
            :dayTxt="'天'"
            :secondsTxt="''"
          ></count-down>
        </div>
      </div>

      <div class="exam-right-part">
        <div class="answers">
          <div class="title-text">答题信息</div>
          <div class="answer-sheet">
            <div
              v-for="(item,index) in answerList"
              class="answer-item"
              :key="index"
              :class="answerItemColorFormat(index+1,item)"
              @click="submitAnswer('turnTo',index+1)"
            >
              <div style="width:100%;height:100%;">
                <div style="height:60%;text-align:left;padding-left:5px;">{{index+1}}</div>
                <div
                  v-if="item.quesType==3&&item.cusAnswer=='A'"
                  style="height:40%;text-align:right;padding-right:5px;"
                >&#10004</div>
                <div
                  v-else-if="item.quesType==3&&item.cusAnswer=='B'"
                  style="height:40%;text-align:right;padding-right:5px;"
                >&#10006</div>
                <div
                  v-else-if="item.quesType==2"
                  style="height:40%;text-align:right;padding-right:5px;font-size:5px;"
                >{{item.cusAnswer.split(',').sort().join('')}}</div>
                <div
                  v-else
                  style="height:40%;text-align:right;padding-right:5px;"
                >{{item.cusAnswer}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-operation">
          <button class="simulate-btn" @click="preQuestion">上一题</button>
          <button class="simulate-btn" @click="submitAnswer('next',0)">下一题</button>
          <button class="simulate-btn" @click="handExam">交卷</button>
        </div>
      </div>
      <div class="exam-center-part">
        <div class="exam-subject">
          <div class="title-text">考试题目</div>
          <div>
            <div class="subject-content">{{currentQuestionIndex}}、{{currentQuestion.Question}}</div>
            <div class="answer-list" v-show="currentQuestion.QuesType!==3">
              <ul>
                <li>
                  <p>A.{{currentQuestion.Option1}}</p>
                </li>
                <li>
                  <p>B.{{currentQuestion.Option2}}</p>
                </li>
                <li>
                  <p>C.{{currentQuestion.Option3}}</p>
                </li>
                <li>
                  <p>D.{{currentQuestion.Option4}}</p>
                </li>
              </ul>
            </div>
            <div v-if="hasSubmitExam&&officialExplanShow" class="officialExplan">
              <Icon
                type="md-close"
                style="position: absolute;
    right: 5px;
    top: 5px;
    overflow: hidden;
    cursor: pointer;
    font-size:18px;"
                @click="closeExplan"
              />
              <div v-html="currentQuestion.Explain" style="font-size:22px;font-weight:bold;">
                <vue-audio
                  v-if="currentQuestion.ExpAudio"
                  :source="mediaURL+currentQuestion.ExpAudio"
                  :mode="mode"
                  @timeupdate="timeupdate"
                  @playing="playing"
                  @pause="pause"
                  @ended="ended"
                  @waiting="waiting"
                  @error="error"
                  style="top:15px"
                  ref="audio"
                >
                  <div class="player">
                    <svg class="progress" :width="svgOptions.width" :height="svgOptions.height">
                      <path
                        :fill="svgOptions.fill"
                        :stroke="svgOptions.stroke"
                        :stroke-width="svgOptions.strokeWidth"
                      ></path>
                    </svg>
                    <a class="play" href="javascript:void(0)"></a>
                  </div>
                </vue-audio>
              </div>
            </div>
            <div class="answer-operation" v-if="!hasSubmitExam">
              <div class="operation-text">
                您选择了：
                <span v-if="currentAnswer.quesType==3&&currentAnswer.cusAnswer=='A'">&#10004</span>
                <span v-else-if="currentAnswer.quesType==3&&currentAnswer.cusAnswer=='B'">&#10006</span>
                <span
                  v-else-if="currentAnswer.quesType==2"
                >{{currentAnswer.cusAnswer?currentAnswer.cusAnswer.split(',').sort().join(''):''}}</span>
                <span v-else>{{currentAnswer.cusAnswer?currentAnswer.cusAnswer:''}}</span>
              </div>
              <div class="operation-option">
                请选择&nbsp
                <button
                  @click="ChooseAnswer('A')"
                >{{currentQuestion.QuesType==3?'&#10004':'A'}}</button>
                <button @click="ChooseAnswer('B')">{{currentQuestion.QuesType==3?'&#10006':'B'}}</button>
                <button @click="ChooseAnswer('C')" v-show="currentQuestion.QuesType!=3">C</button>
                <button @click="ChooseAnswer('D')" v-show="currentQuestion.QuesType!=3">D</button>
              </div>
            </div>
            <div class="answer-operation" v-else>
              <div class="operation-text" style="margin-right:20px;">
                您的答案：
                <span v-if="currentAnswer.quesType==3&&currentAnswer.cusAnswer=='A'">&#10004</span>
                <span v-else-if="currentAnswer.quesType==3&&currentAnswer.cusAnswer=='B'">&#10006</span>
                <span
                  v-else-if="currentAnswer.quesType==2"
                >{{currentAnswer.cusAnswer?currentAnswer.cusAnswer.split(',').sort().join(''):'未答'}}</span>
                <span v-else>{{currentAnswer.cusAnswer?currentAnswer.cusAnswer:'未答'}}</span>
              </div>
              <div class="operation-text">
                正确答案：
                <span v-if="currentAnswer.quesType==3&&currentQuestion.Answer=='A'">&#10004</span>
                <span v-else-if="currentAnswer.quesType==3&&currentQuestion.Answer=='B'">&#10006</span>
                <span
                  v-else-if="currentAnswer.quesType==2"
                >{{currentQuestion.Answer.split(',').sort().join('')}}</span>
                <span v-else>{{currentQuestion.Answer}}</span>
              </div>
              <div style="float:left;margin-left:50px">
                <button
                  class="simulate-btn"
                  style="position:relative;bottom:10px;"
                  @click="openOfficialExplan"
                >答案解析</button>
                <button
                  class="simulate-btn"
                  style="position:relative;bottom:10px;"
                  @click="removeSingleSubject"
                >移除该题</button>
              </div>
            </div>
          </div>
        </div>
        <div class="tips-info">
          <div class="title-text">提示信息</div>
          <p class="subject-type">{{currentQuestion.QuesTypeText}}题，请选择正确答案！</p>
        </div>
      </div>
    </div>
    <div class="photo-wrapper">
      <div class="photo-info">
        <div class="title-text">考题图片信息</div>
        <div style="width:500px;height:200px;margin:30px auto">
          <img
            v-if="!isVideo&&currentImgUrl"
            :src="currentImgUrl"
            alt
            style="max-height:200px;max-width:100%;"
          >
          <video v-if="isVideo" :src="currentImgUrl" autoplay loop></video>
        </div>
      </div>
    </div>
    <!--错题review-->
    <div v-show="explanModalShow" class="explan-modal-wrapper">
      <div class="explan-modal">
        <div class="explan-title"></div>
        <div class="explan-content">
          <div class="subject-content">{{currentQuestionIndex}}、{{currentQuestion.Question}}</div>
          <div class="answer-list" v-show="currentQuestion.QuesType!==3">
            <ul>
              <li>
                <p>A.{{currentQuestion.Option1}}</p>
              </li>
              <li>
                <p>B.{{currentQuestion.Option2}}</p>
              </li>
              <li>
                <p>C.{{currentQuestion.Option3}}</p>
              </li>
              <li>
                <p>D.{{currentQuestion.Option4}}</p>
              </li>
            </ul>
          </div>
          <div class="true-answer">
            正确答案：
            <span v-if="currentAnswer.quesType==3&&currentQuestion.Answer=='A'">&#10004</span>
            <span v-else-if="currentAnswer.quesType==3&&currentQuestion.Answer=='B'">&#10006</span>
            <span
              v-else-if="currentAnswer.quesType==2"
            >{{currentQuestion.Answer.split(',').sort().join('')}}</span>
            <span v-else>{{currentQuestion.Answer}}</span>
          </div>
          <div>
            <img
              v-if="!isVideo&&currentImgUrl"
              :src="currentImgUrl"
              alt
              style="max-height:200px;max-width:100%;"
            >
            <video v-if="isVideo" :src="currentImgUrl" autoplay loop></video>
          </div>
          <div class="continue-exam">
            <button class="simulate-btn" @click="continueExam">继续考试</button>
          </div>
          <p class="continue-text">以上正确答案确认无误后，点击“继续考试”按钮开始下一题答题</p>
          <p class="back-exam">页面将在{{countBackTime}}秒后自动关闭，回到考试状态！</p>
        </div>
      </div>
    </div>
    <!--交卷review-->
    <div v-show="submitExamModalShow" class="exam-modal-wrapper">
      <div class="exam-modal">
        <div class="exam-title"></div>
        <div class="exam-content">
          <div class="exam-ksqrck">考试确认窗口</div>
          <div v-if="!hasSubmitExam">
            <div
              style="background-color:#3ec080;text-align:left;padding:5px;margin:3px 0;font-size:22px;"
            >操作提示：</div>
            <div
              style="background-color:#3ec080;text-align:left;padding:10px;margin:3px 0;font-size:20px;"
            >
              <p style="margin-bottom:20px;">1.点击【确认交卷】，将提交考试成绩，结束考试！</p>
              <p>2.点击【继续考试】，将关闭本窗口，继续考试！</p>
            </div>
            <div style="background-color:#817fc0;padding:15px;">
              <button
                class="simulate-btn"
                @click="confirmHandIn('handIn')"
                style="margin-right:30px;"
              >确认交卷</button>
              <button class="simulate-btn" @click="cancelHandIn">继续考试</button>
            </div>
          </div>

          <div v-else>
            <div
              style="background-color:#3ec080;text-align:left;padding:10px 10px 50px;margin:3px 0;font-size:20px;"
            >
              <p v-if="finalScore>90">&nbsp&nbsp&nbsp&nbsp恭喜你，您本次考试得{{finalScore}}分，成功通过考试！</p>
              <p v-else>&nbsp&nbsp&nbsp&nbsp很遗憾，您本次考试得{{finalScore}}分，不及格！祝你下次考试成功！</p>
            </div>
            <div style="background-color:#817fc0;padding:15px;">
              <button class="simulate-btn" @click="checkErrors" style="margin-right:30px;">查看错题</button>
              <button class="simulate-btn" @click="oneMoreTime">重新考试</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CountDown from "./../my-components/count-down.vue";
import {
  getSimulateExerciseQuestions,
  removeSingleSubject
} from "@/api/questions";
import { timestampToTime } from "@/libs/util";
import { mediaURL } from "@/config";
import vueAudio from "./../my-components/vue-audio.vue";
import * as constant from "./../my-components/constant";
export default {
  name: "simulate-exam",
  components: {
    CountDown,
    vueAudio
  },
  data() {
    return {
      examGroup: 1,
      questionType: "exercise",
      questionList: [],
      totalCount: 0,
      correctCount: 0, //回答正确题目数
      errorCount: 0, //回答错误题目数
      answerList: [], //答案列表
      currentQuestion: {},
      currentQuestionIndex: 1,
      explanModalShow: false,
      submitExamModalShow: false,
      currentTime: "",
      endTime: "",
      handExamModalShow: false,
      ExamMinute: 0,
      hasSubmitExam: false, //是否提交了试卷
      mediaURL: mediaURL,
      mode: constant.SINGLE,
      single_mode: constant.SINGLE,
      loop_mode: constant.LOOP,
      order_mode: constant.ORDER,
      circulation_mode: constant.CIRCULATION,
      random_mode: constant.RANDOM,
      svgOptions: {
        width: 40,
        height: 40,
        fill: "none",
        stroke: "#007aff",
        strokeWidth: 2
      },
      countBackTime: 0, //弹出框倒数时间
      officialExplanShow: false,
      flag: "next",
      flagQuesIndex: 0
    };
  },
  watch: {
    countBackTime: function(val, oldval) {
      if (val > 0 && this.explanModalShow) {
        let vm = this;
        setTimeout(function() {
          vm.countBackTime = vm.countBackTime - 1;
        }, 1000);
      } else if (val == 0) {
        this.explanModalShow = false;
        if (this.flag == "next") {
          this.nextQuestion();
        } else {
          this.turnTo(this.flagQuesIndex);
        }
      }
    }
  },
  computed: {
    //所选的科目
    ...mapState({
      choosedSubject: state => state.app.choosedSubject,
      userName: state => state.user.userName
    }),
    finalScore: function() {
      if (this.totalCount > 0) {
        return parseInt((this.correctCount / this.totalCount) * 100);
      } else {
        return 0;
      }
    },
    subjectText: function() {
      if (this.choosedSubject === 1) {
        return "科目一";
      } else {
        return "科目四";
      }
    },
    currentImgUrl: function() {
      if (this.currentQuestion.QuesImage) {
        return mediaURL + this.currentQuestion.QuesImage;
      } else {
        return "";
      }
    },
    isVideo: function() {
      const reg = /.+.mp4/;
      return reg.test(this.currentImgUrl);
    },
    answerOptionClass: function() {
      return function(option) {
        let className = "answer-option";
        if (this.currentQuestion.QuesTypeText === "多选") {
          if (this.currentAnswer.IsAnswered) {
            //已经提交答案
            if (
              this.currentQuestion.Answer.includes(option) &&
              this.currentAnswer.cusAnswer.includes(option)
            ) {
              //答案里有这个选项 且 选择了这个选项
              className = "answer-true-right";
            } else if (
              this.currentQuestion.Answer.includes(option) &&
              !this.currentAnswer.cusAnswer.includes(option)
            ) {
              //答案里有  但  没选
              className = "answer-right";
            } else if (
              !this.currentQuestion.Answer.includes(option) &&
              this.currentAnswer.cusAnswer.includes(option)
            ) {
              //答案里没有 但 选了
              className = "answer-error";
            }
          } else {
            //没有提交答案的如果选过
            if (this.currentAnswer.cusAnswer.includes(option)) {
              className = "answer-right";
            }
          }
        } else {
          if (this.currentAnswer.IsAnswered) {
            if (this.currentQuestion.Answer.includes(option)) {
              className = "answer-right";
            } else if (
              !this.currentQuestion.Answer.includes(option) &&
              this.currentAnswer.cusAnswer.includes(option)
            ) {
              className = "answer-error";
            }
          }
        }
        return className;
      };
    },
    currentAnswer: function() {
      if (this.answerList.length > 0) {
        return this.answerList[this.currentQuestionIndex - 1];
      } else {
        return {
          subIndex: 0,
          cusAnswer: "",
          IsAnswered: false,
          IsCorrect: true
        };
      }
    }
  },
  mounted() {
    this.examGroup = this.$route.query.examGroup
      ? this.$route.query.examGroup
      : 1;
    this.startAnswer();
    this.getQuestionsPagedList();
  },
  methods: {
    countDownStart: function(a) {
      console.log("callBack--" + a + "--开始倒计时结束回调");
    },
    countDownEnd(end) {
      alert("答题结束");
      let handleTime;
      if (this.choosedSubject === 1) {
        //科目一45 分钟  科目四 30分钟  汕尾地区是45min
        handleTime = this.currentTime + 1000 * 60 * 45;
      } else {
        handleTime = this.currentTime + 1000 * 60 * 45;
      }
      this.confirmHandIn(handleTime);
    },
    toggleExplan() {
      this.IsExplanOpen = !this.IsExplanOpen;
    },
    async getQuestionsPagedList() {
      const params = {
        s_Subject: this.choosedSubject,
        s_ExamGroup: this.examGroup
      };
      const res = await getSimulateExerciseQuestions(params);
      this.questionList = res.data;
      this.totalCount = this.questionList.length;
      for (let j = 0; j < this.totalCount; j++) {
        this.answerList.push({
          subIndex: j,
          cusAnswer: "",
          IsAnswered: false,
          IsCorrect: false,
          quesType: this.questionList[j].QuesType
        });
      }
      this.currentQuestion = this.questionList[this.currentQuestionIndex - 1];
    },
    preQuestion() {
      if (this.currentQuestionIndex > 1) {
        this.currentQuestionIndex--;
        this.currentQuestion = this.questionList[this.currentQuestionIndex - 1];
        if (this.hasSubmitExam) {
          this.resetAudioToPause(); //重置音频播放按钮
        }
      }
    },
    nextQuestion() {
      if (this.currentQuestionIndex !== this.totalCount) {
        this.currentQuestionIndex++;
        this.currentQuestion = this.questionList[this.currentQuestionIndex - 1];
        if (this.hasSubmitExam) {
          this.resetAudioToPause(); //重置音频播放按钮
        }
      }
    },
    turnTo(index) {
      if (index !== this.currentQuestionIndex) {
        this.currentQuestionIndex = index;
        this.currentQuestion = this.questionList[this.currentQuestionIndex - 1];
        if (this.hasSubmitExam) {
          this.resetAudioToPause(); //重置音频播放按钮
        }
      }
    },
    continueExam() {
      this.countBackTime = 0;
    },
    //选择答案
    ChooseAnswer(option) {
      //没有回答
      if (!this.currentAnswer.IsAnswered) {
        if (this.currentQuestion.QuesTypeText !== "多选") {
          this.answerList[this.currentQuestionIndex - 1].cusAnswer = option;
        } else {
          if (
            this.answerList[this.currentQuestionIndex - 1].cusAnswer.indexOf(
              option
            ) == -1
          ) {
            this.answerList[this.currentQuestionIndex - 1].cusAnswer +=
              option + ",";
          }
        }
      }
    },
    //提交答案
    submitAnswer(flag = "next", quesIndex) {
      this.flag = flag;
      if (quesIndex) {
        this.flagQuesIndex = quesIndex;
      }

      if (this.hasSubmitExam) {
        if (flag == "next") {
          this.nextQuestion();
        } else {
          this.turnTo(quesIndex);
        }

        return;
      }
      //如果没有写答案  直接到下一题
      if (!this.currentAnswer.cusAnswer) {
        if (flag == "next") {
          this.nextQuestion();
        } else {
          this.turnTo(quesIndex);
        }
        return;
      }
      if (
        this.currentQuestion.QuesTypeText === "多选" &&
        !this.currentAnswer.IsAnswered
      ) {
        let cusAnswer = this.currentAnswer.cusAnswer
          .substring(0, this.currentAnswer.cusAnswer.length - 1)
          .split(",");
        let subjectAnswer = this.currentQuestion.Answer.split(",");
        this.answerList[this.currentQuestionIndex - 1].IsCorrect =
          cusAnswer.sort().toString() === subjectAnswer.sort().toString();
        this.answerList[this.currentQuestionIndex - 1].IsAnswered = true;
        //回答以后的统计
        this.answerList[this.currentQuestionIndex - 1].IsCorrect
          ? this.correctCount++
          : this.errorCount++;
        if (this.answerList[this.currentQuestionIndex - 1].IsCorrect) {
          //回答正确到下一题
          let vm = this;

          setTimeout(function() {
            if (flag == "next") {
              vm.nextQuestion();
            } else {
              vm.turnTo(quesIndex);
            }
          }, 500);
        } else {
          //回答错误  打开讲解
          this.explanModalShow = true;
          this.countBackTime = 7;
        }
      } else {
        this.answerList[this.currentQuestionIndex - 1].IsCorrect =
          this.currentQuestion.Answer ===
          this.answerList[this.currentQuestionIndex - 1].cusAnswer;
        this.answerList[this.currentQuestionIndex - 1].IsAnswered = true;
        //回答以后的统计
        this.answerList[this.currentQuestionIndex - 1].IsCorrect
          ? this.correctCount++
          : this.errorCount++;
        if (this.answerList[this.currentQuestionIndex - 1].IsCorrect) {
          //回答正确到下一题
          let vm = this;
          setTimeout(function() {
            if (flag == "next") {
              vm.nextQuestion();
            } else {
              vm.turnTo(quesIndex);
            }
          }, 500);
        } else {
          //回答错误  打开讲解
          this.explanModalShow = true;
          this.countBackTime = 7;
        }
      }
    },
    answerItemColorFormat(index, answer) {
      let bgColorClass = "";
      if (answer.IsAnswered) {
        answer.IsCorrect
          ? (bgColorClass = "answer-correct-color")
          : (bgColorClass = "answer-error-color");
      }
      if (this.currentQuestionIndex === index) {
        bgColorClass = "current-subject-color";
      }
      return bgColorClass;
    },
    startAnswer: function() {
      let nowTime = new Date();
      this.currentTime = new Date().getTime();
      if (this.choosedSubject === 1) {
        //科目一45 分钟  科目四 30分钟
        nowTime.setMinutes(nowTime.getMinutes() + 45);
      } else {
        nowTime.setMinutes(nowTime.getMinutes() + 45);
      }

      this.endTime = nowTime.getTime();
    },
    //重置音频播放按钮
    resetAudioToPause() {
      this.$refs.audio.$el.querySelector("a").className = constant.PAUSE_CLASS;
    },
    timeupdate(e) {
      let target = e.target;
      let currentTime = target.currentTime;
      let duration = target.duration;
      let percent = ((100 / duration) * currentTime).toFixed(1);
      if (isNaN(percent) || percent === "0.0") {
        percent = 0;
      }
      let svg = target.parentNode.querySelector("svg");
      if (percent > 100) {
        percent = 100;
      }
      let centerX = this.svgOptions.width / 2;
      let centerY = this.svgOptions.height / 2;
      let radius = centerX - this.svgOptions.strokeWidth / 2;
      let startX = centerX;
      let startY = centerY - radius;
      let xAxisRotation = 0;
      let sweepFlag = 1;
      let circ = Math.PI * 2;
      let largeArcFlag = 0;
      if ((percent * circ) / 100 >= Math.PI) {
        largeArcFlag = 1;
      }
      let endX = centerX + radius * Math.sin((circ * percent) / 100);
      let endY = centerY - radius * Math.cos((circ * percent) / 100);
      let d =
        "M" +
        startX +
        "," +
        startY +
        " " +
        "A" +
        radius +
        "," +
        radius +
        " " +
        xAxisRotation +
        " " +
        largeArcFlag +
        " " +
        sweepFlag +
        " " +
        endX +
        "," +
        endY;
      let path = svg.querySelector("path");
      path.setAttribute("d", d);
    },
    confirmHandIn(handExamTime) {
      if (handExamTime === "handIn") {
        handExamTime = new Date().getTime();
      }
      this.ExamMinute = Math.round(
        (handExamTime - this.currentTime) / 1000 / 60
      );
      console.log(this.correctCount / this.totalCount);
      let params = {
        Correct: this.correctCount,
        Wrong: this.errorCount,
        Score: this.finalScore,
        Subject: this.choosedSubject,
        StartTime: timestampToTime(this.currentTime),
        EndTime: timestampToTime(handExamTime),
        ExamMinute: this.ExamMinute
      };
      this.answerList.forEach(val => (val.IsAnswered = true));
      console.log(this.answerList);
      this.submitExamModalShow = true;
      this.hasSubmitExam = true;
    },
    cancelHandIn() {
      this.submitExamModalShow = false;
    },
    //交卷
    handExam() {
      this.submitExamModalShow = true;
    },
    oneMoreTime() {
      this.$router.go(0);
    },
    checkErrors() {
      this.submitExamModalShow = false;
    },
    //打开答案解析
    openOfficialExplan() {
      this.officialExplanShow = true;
    },
    closeExplan() {
      this.officialExplanShow = false;
    },
    //移除该题
    async removeSingleSubject() {
      let result = await removeSingleSubject({ id: this.currentQuestion.Id });
      if (result.code == 0) {
        this.$Message.success("移除成功");
      } else {
        this.$Message.error(result.data);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./../../assets/styles/common";
.simulate-btn {
  padding: 3px 18px;
  margin-right: 5px;
  cursor: pointer;
}
.answer-correct-color {
  background-color: #c9f7a9;
  border: 1px solid #3c850c;
}
.answer-error-color {
  background-color: #fb6c52;
  border: 1px solid #fb6c52;
}
.current-subject-color {
  background-color: #b2eeee;
  border: 1px solid #2eb9bf;
}
.title-text {
  display: inline-block; /*设置为块级元素会独占一行形成上下居中的效果*/
  position: absolute; /*定位横线（当横线的父元素）*/
  color: #dd3301; /*居中文字的颜色*/
  padding: 0 4px;
  top: -10px;
  left: 10px;
  background-color: #fff;
  font-size: 14px;
}
.exam {
  height: 492px;
  .exam-left-part {
    width: 250px;
    height: 100%;
    float: left;
    .theory-exam {
      border: 1px solid #b1b1b1;
      margin: 10px 20px;
      padding: 10px;
      position: relative;
    }
    .examinee-info {
      border: 1px solid #b1b1b1;
      margin: 24px 20px 0;
      padding: 10px 10px 20px 10px;
      position: relative;
      p {
        line-height: 26px;
        text-align: left;
      }
    }
    .timing {
      border: 1px solid #b1b1b1;
      margin: 15px 20px;
      padding: 10px;
      height: 50px;
      position: relative;
    }
  }
  .exam-center-part {
    margin: 0 430px 0 260px;
    padding-top: 10px;
    height: 100%;
    .exam-subject {
      border: 1px solid #b1b1b1;
      padding: 10px;
      position: relative;
      height: 400px;
      .subject-content {
        text-align: left;
        font-size: 18px;
           font-weight: bold;
        padding: 10px;
      }
      .answer-list {
        margin-top: 30px;
        ul {
          list-style: none;
          padding: 10px;
          li {
            text-align: left;
            padding: 5px 0;
            font-size: 16px;
             font-weight: bold;
            p {
              line-height: 30px;
              cursor: pointer;
            }
          }
        }
      }
      .officialExplan {
        border: 1px solid #f3b769;
        color: #933968;
        background-color: #fef9e4;
        text-align: left;
        z-index: 999;
        position: absolute;
        bottom: 40px;
        padding: 20px 10px;
      }
      .answer-operation {
        position: absolute;
        top: 370px;
        width: 100%;
        height: 25px;
        line-height: 25px;
        .operation-text {
          float: left;
          font-size: 14px;
          font-weight: bold;
        }
        .operation-option {
          position: absolute;
          width: 260px;
          right: 0;
          bottom: 0;
          font-size: 14px;
          font-weight: bold;
          button {
            padding: 3px 12px;
            margin-right: 5px;
            cursor: pointer;
          }
        }
      }
    }
    .tips-info {
      border: 1px solid #b1b1b1;
      margin: 15px 0;
      padding: 10px;
      position: relative;
      height: 50px;
      .subject-type {
        padding-top: 5px;
        text-align: left;
      }
    }
  }
  .exam-right-part {
    width: 420px;
    height: 100%;
    float: right;
    .answers {
      border: 1px solid #b1b1b1;
      margin: 10px 20px;
      padding: 10px 4px;
      position: relative;
      .answer-sheet {
        width: 100%;
        margin-top: 5px;
        max-height: 373px;
        overflow-y: scroll;
        color: #464446;
        .answer-item {
          float: left;
          position: relative;
          width: 32px;
          height: 33px;
          line-height: 12px;
          border: 1px solid #e9e9e9;
          cursor: pointer;
          font-size: 14px;
          margin: 2px;
        }
      }
    }
    .btn-operation {
      margin: 15px 0;
      padding: 10px;
      position: relative;
      height: 40px;
    }
  }
}

.photo-wrapper {
  width: 100%;
  height: 300px;
  .photo-info {
    position: relative;
    margin: 0 20px;
    height: 280px;
    border: 1px solid #b1b1b1;
  }
}
.explan-modal-wrapper {
  position: fixed;
  outline: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .explan-modal {
    margin: 0 auto;
    position: relative;
    outline: 0;
    top: 100px;
    width: 600px;
    background-color: #3ec080;
    border: 0;
    border-radius: 6px;
    background-clip: padding-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    .explan-title {
      height: 30px;
      padding: 14px 16px;
      background: -webkit-linear-gradient(
        #aee6f3,
        #35aad5
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#aee6f3, #35aad5); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#aee6f3, #35aad5); /* Firefox 3.6 - 15 */
      background: linear-gradient(#aee6f3, #35aad5); /* 标准的语法 */
    }
    .explan-content {
      border: 1px solid #fff;

      .subject-content {
        text-align: left;
        font-size: 14px;
        padding: 10px;
      }
      .answer-list {
        ul {
          list-style: none;
          padding: 5px 10px;
          li {
            text-align: left;
            padding: 0;
            font-size: 14px;
            p {
              line-height: 24px;
              cursor: pointer;
            }
          }
        }
      }
      .true-answer {
        padding: 5px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
      }
      .continue-exam {
        padding: 5px;
        background-color: #817fc0;
      }
      .continue-text {
        background-color: #fff;
        padding: 5px;
      }
      .back-exam {
        background-color: #ffcc66;
        color: #0000ff;
        padding: 2px;
      }
    }
  }
}

.exam-modal-wrapper {
  position: fixed;
  outline: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .exam-modal {
    margin: 0 auto;
    position: relative;
    outline: 0;
    top: 100px;
    width: 500px;
    background-color: #fff;
    border: 0;
    border-radius: 6px;
    background-clip: padding-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    .exam-title {
      height: 30px;
      padding: 14px 16px;
      background: -webkit-linear-gradient(
        #aee6f3,
        #35aad5
      ); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#aee6f3, #35aad5); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#aee6f3, #35aad5); /* Firefox 3.6 - 15 */
      background: linear-gradient(#aee6f3, #35aad5); /* 标准的语法 */
    }
    .exam-content {
      padding: 5px 15px 15px 15px;
      .exam-ksqrck {
        background-color: #118781;
        color: #c60000;
        font-size: 22px;
        font-weight: 700;
        padding: 8px;
      }
    }
  }
}
</style>
